<template>
  <div class="app-container">

    <u-page title="活动管理">
      <div slot="header">
        <el-button type="primary" icon="el-icon-edit" @click="hdlOpen(newForm)">
          {{ textMap['create'] }}
        </el-button>
      </div>

      <u-filtered>
        <el-form ref="listQuery" :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="listQuery.name" placeholder="活动名称" clearable />
          </el-form-item>
          <el-form-item label="活动状态" prop="status">
            <el-select v-model="listQuery.status" placeholder="请选择">
              <el-option label="全部" value="" />
              <el-option label="未开始" :value="0" />
              <el-option label="进行中" :value="1" />
              <el-option label="已结束" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-dropdown>
              <el-button type="primary">
                批量操作<i class="el-icon-arrow-down el-icon--right" />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :disabled="selectData.length===0" @click.native="hdlDel">批量删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
        @selection-change="hdlSelectChange"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="hdlDelete(row.id, row.name)">删除</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>

    </u-page>

    <u-dialog :title="textMap[dialogStatus]" :show.sync="dialogFormVisible" @confirm="dialogStatus==='create'?hdlCreate():hdlUpdate()">
      <el-form ref="dialogForm" :rules="rules" :model="dataForm" label-width="80px">
        <el-tabs v-model="active">

          <el-tab-pane label="基本信息" name="first">

            <el-form-item label="活动名称" prop="name">
              <el-input v-model="dataForm.name" placeholder="活动名称" clearable maxlength="20" show-word-limit />
            </el-form-item>

            <el-form-item label="活动时间" prop="validityDate">
              <u-date-time-picker v-model="dataForm.validityDate" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" @change="changeDate" />
            </el-form-item>

            <el-form-item label="活动状态" prop="status">
              <el-radio-group v-model="dataForm.status">
                <el-radio :label="0">未开始</el-radio>
                <el-radio :label="1">进行中</el-radio>
                <el-radio :label="2">已结束</el-radio>
              </el-radio-group>
            </el-form-item>

          </el-tab-pane>

          <el-tab-pane label="奖励设置" name="award">
            <el-form-item label="奖品设置" prop="award">
              <award v-model="dataForm.award" />
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane label="规则设置" name="third">

            <el-form-item label="规则说明" prop="policy">
              <u-tinymce v-model="dataForm.policy" :height="300" />
            </el-form-item>

          </el-tab-pane>

          <el-tab-pane label="页面设置" name="fourth">

            <el-form-item label="背景图片" prop="thumb">
              <u-upload v-model="dataForm.thumb" name="file" />
            </el-form-item>

          </el-tab-pane>

          <el-tab-pane label="黑名单" name="fifth">

            <el-card shadow="never" class="panel">
              <div class="panel-body">
                <div class="panel-header">
                  <h4>黑名单</h4>
                  <span>开启后将限制名单参与</span>
                </div>
                <div>
                  <el-switch v-model="dataForm.blacklistEnabled" class="panel-switch" />
                </div>
              </div>
              <div v-if="dataForm.blacklistEnabled" style="margin-top: 20px;">

                <el-form-item label="黑名单" prop="blacklist">
                  <blacklist v-model="dataForm.blacklist" style="width: 100%" />
                </el-form-item>
              </div>
            </el-card>

          </el-tab-pane>

          <el-tab-pane label="白名单" name="sixth">

            <el-card shadow="never" class="panel">
              <div class="panel-body">
                <div class="panel-header">
                  <h4>白名单</h4>
                  <span>开启后将限制名单参与</span>
                </div>
                <div>
                  <el-switch v-model="dataForm.whitelistEnabled" class="panel-switch" />
                </div>
              </div>
              <div v-if="dataForm.whitelistEnabled" style="margin-top: 20px;">

                <el-form-item label="白名单" prop="whitelist">
                  <blacklist v-model="dataForm.whitelist" style="width: 100%" />
                </el-form-item>
              </div>
            </el-card>

          </el-tab-pane>

        </el-tabs>

      </el-form>
    </u-dialog>

  </div>
</template>
<script>
import award from '@/components/module/award'
import blacklist from '@/components/module/blacklist'
export default {
  components: {
    blacklist,
    award
  },
  data() {
    return {
      api: this.$u.api.PluginsInteractiveActivity,
      // 表格
      columns: [
        {
          prop: 'name',
          label: '活动名称'
        },
        {
          prop: 'beginTime',
          label: '开始时间'
        },
        {
          prop: 'endTime',
          label: '停止时间'
        },
        {
          prop: 'status',
          label: '活动状态',
          render: (h, params) => {
            const { status } = params.row
            if (status === 0) {
              return h('el-tag', { props: { type: 'warning' }}, '未开始')
            } else if (status === 1) {
              return h('el-tag', { props: { type: 'success' }}, '进行中')
            } else if (status === 2) {
              return h('el-tag', { props: { type: 'danger' }}, '已结束')
            }
          }
        },
        {
          prop: 'createdAt',
          label: '创建时间',
          timestamp: true
        }
      ],
      list: [],
      listLoading: true,
      listOptions: {
        mutiSelect: true, // boolean 是否多选
        stripe: true // boolean 斑马纹
      },
      listQuery: {
        pageNumber: 1,
        pageSize: 10,
        totalCount: 1,
        title: '',
        status: ''
      },

      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑活动',
        create: '新增活动'
      },
      dataForm: {},
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: ['blur'] }
        ],
        validityDate: [
          { required: true, message: '请选择活动时间', trigger: ['blur'] }
        ],
        award: [
          { required: true, message: '请设置奖品', trigger: ['blur'] }
        ]
      },
      // 删除选中数据
      selectData: [],
      newForm: {
        status: 0
      },
      active: 'first'
    }
  },
  created() {
    this.hdlList()
  },
  methods: {
    /**
     * 活动时间选择
     * @param item
     */
    changeDate(item) {
      if (item) {
        this.dataForm.beginTime = item[0]
        this.dataForm.endTime = item[1]
      } else {
        this.dataForm.beginTime = ''
        this.dataForm.endTime = ''
      }
    },
    // 打开修改弹窗
    handleEdit(row) {
      const { beginTime, endTime } = row
      row.validityDate = []
      if (beginTime && endTime) {
        row.validityDate = [beginTime, endTime]
      }
      this.hdlEdit(row)
    }
  }
}
</script>
<style lang="scss" scoped>

.panel{
  margin-bottom: 20px;
  .panel-body{
    display:flex;
    justify-content:space-between;

    .panel-header{
      display: flex;
      flex-flow: column;
      color: #999;
      font-size: 12px;

      h4{
        font-size: 14px;
        color: #000;
      }
    }

    .panel-switch{
      margin-top: 20px;
    }
  }
}

</style>
